<template>
	<view style="display: flex;flex-direction: column;align-items: center;width: 100%;">
		<view class="busin-container">
			<skeleton>
				<template slot="label">
					计算方式
				</template>
				<template slot="input">
					<picker @change="onChangeCalculationType" :value="form.calculationTypeIndex" :range="calculationTypeList"
						range-key="name">
						<view style="padding: 20rpx;background-color: white;">
							{{ calculationTypeList[form.calculationTypeIndex].name }}</view>
					</picker>
					<view class="ico_down">
					</view>
				</template>
			</skeleton>
			<template v-if="form.calculationTypeIndex == '0'">
				<skeleton>
					<template slot="label">
						房屋总价
					</template>
					<template slot="input">
						<view class="input-class">
							<input class="inputWrapper" v-model="form.totalPrice"
								type="digit" maxlength="10" placeholder="请输入房屋总价" />
							<view class="">
								万元
							</view>
						</view>
					</template>
				</skeleton>
				<skeleton>
					<template slot="label">
						<p>首付比例</p>
					</template>
					<template slot="input">
						<picker @change="onChangepercent" :value="form.percentIndex" :range="percentList" range-key="name">
							<view style="padding: 20rpx;background-color: white;">{{ percentList[form.percentIndex].name }}
							</view>
						</picker>
						<view class="ico_down">
						</view>
					</template>
				</skeleton>
				<skeleton>
					<template slot="label">
						<p>首付金额</p>
					</template>
					<template slot="input">
						{{firstPay}}万元
					</template>
				</skeleton>
			</template>
			<skeleton v-if="form.calculationTypeIndex == '1'">
				<template slot="label">
					<p>贷款金额</p>
				</template>
				<template slot="input">
					<view class="input-class">
						<input class="inputWrapper" v-model="form.amount" type="digit" maxlength="10"
							placeholder="请输入贷款金额" />
						<view class="">
							万元
						</view>
					</view>
				</template>
			</skeleton>


			<skeleton>
				<template slot="label">
					<p>贷款年限</p>
				</template>
				<template slot="input">
					<picker @change="onChangeYear" :value="form.yearIndex" :range="yearArray" range-key="name">
						<view style="padding: 20rpx;background-color: white;">{{ yearArray[form.yearIndex].name }}</view>
					</picker>
					<view class="ico_down">
					</view>
				</template>
			</skeleton>
		</view>

		<view class="busin-container" style="margin-top: 20rpx;">
			<skeleton>
				<template slot="label">
					<p>利率方式</p>
				</template>
				<template slot="input">
					<picker @change="onChangeRateType" :value="form.rateTypeIndex" :range="rateTypeList" range-key="name">
						<view style="padding: 20rpx;background-color: white;">{{ rateTypeList[form.rateTypeIndex].name }}
						</view>
					</picker>
					<view class="ico_down">
					</view>
				</template>
			</skeleton>
			<template v-if="form.rateTypeIndex == '1'">
				<skeleton>
					<template slot="label">
						<p>商业贷款利率</p>
					</template>
					<template slot="input">
						<picker @change="onChangeRate" :value="form.rateIndex" :range="rateList" range-key="name">
							<view style="padding: 20rpx;background-color: white;">{{ rateList[form.rateIndex].name }}</view>
						</picker>
						<view class="ico_down">
						</view>
					</template>
				</skeleton>
				
			</template>
			<template v-else>
				<skeleton >
					<template slot="label">
						<p>LPR</p>
					</template>
					<template slot="input">
						
						<view class="">
							{{lpr}}0 %
						</view>
				
					</template>
				</skeleton>
				
				<skeleton >
					<template slot="label">
						<p>基点</p>
					</template>
					<template slot="input">
						<view class="input-class">
							<input class="inputWrapper" v-model="form.point" type="digit"
								placeholder="请输入基点"
								maxlength="10" />
							<view class="">
								BP(‱)
							</view>
						</view>
					</template>
				</skeleton>
				
				<skeleton >
					<template slot="label">
						<p>商业贷款利率</p>
					</template>
					<template slot="input">
						<text style="color: #f00;margin-right: 10rpx;">{{rateLpr}}</text>
						%
					</template>
				</skeleton>
			</template>
		</view>	
	</view>
</template>

<script>
	import skeleton from './skeleton.vue'
	import defaultList from './defaultList.js'
	
	export default {
		components: {
			skeleton
		},
		data() {
			return {
				lpr: 4.2,
				//计算方式
				calculationTypeList: defaultList.calculationTypeList,

				//首付比例
				percentList: defaultList.percentList,
				// 利率计算方式
				rateTypeList:defaultList.rateTypeList,
				
				// 利率表
				rateList: defaultList.rateListBusiness,
					
				yearArray: defaultList.yearList,
				form: {
					// 计算方式
					calculationTypeIndex: '0',
					// 首付比例
					percentIndex: "2",
					// 利率类型
					rateTypeIndex: "0",	
					// 利率
					rateIndex: "0",
					// 年限
					yearIndex: "29",
					// 房屋总价
					totalPrice: "",		
					// 贷款金额
					amount: "",
					// 基点
					point: "0",
				},
				
			}
		},
		watch: {
			form: {
				handler: function(newvalue) {
					console.log(newvalue);
				},
				deep: true //deep置为true表示：对象中任一属性值发生变化，都会触发handler中的方法
			},
			value: {
				handler: function observer(val) {

					this.form.totalPrice = val || '';

				},
				immediate: true
			}
		},
		props: {
			value: {
				type: String
			},
		},
		computed:{
			firstPay: function(){
				return this.percentList[this.form.percentIndex].value*Number(this.form.totalPrice).toFixed(2)
			},
			rateLpr: function(){	
				return (this.lpr + Number(this.form.point)/100).toFixed(2)		
			}
		},
		
		
		created() {
			
		},
		onLoad() {
			this.setInit()
		},
		methods: {
		
			submit() {
				if (this.rules()) {
					var amount = 0
					if(this.form.calculationTypeIndex==0){
						amount = (1-this.percentList[this.form.percentIndex].value)*Number(this.form.totalPrice).toFixed(2)
					}else{
						amount = this.form.amount;
					}
					var rateNum = 0
					if (this.form.rateTypeIndex == 0){
						rateNum = (this.lpr + Number(this.form.point)/100).toFixed(2)
					}else{
						rateNum =  (this.rateList[this.form.rateIndex]).value.toFixed(2)
					}
					
					const obj = {
						type: 0,	//贷款方式，商业贷款
						form: this.form,
						loanMoneyTotal: amount*10000,
						months: this.yearArray[this.form.yearIndex].value,
						rateNumTotal: (rateNum / 100).toFixed(4),
					}
					// console.log("submit", obj)
					this.$emit('submit', obj)
				}
			},
			rules() {
				if (this.form.calculationTypeIndex == '0') {
					if (!this.form.totalPrice) {
						uni.showToast({
							title: '请输入房屋总额',
							icon: 'none'
						})
						return false
					}
					
					return true
				}
				if (this.form.calculationTypeIndex == '1') {
					if (!this.form.amount) {
						uni.showToast({
							title: '请输入贷款总额',
							icon: 'none'
						})
						return false
					}
				}
				return true
			},


			setInit() {
				
			},

			// 计算方式勾选事件
			onChangeCalculationType(val) {
				this.form.calculationTypeIndex = val.detail.value
			},

			// 首付占比
			onChangepercent(e) {
				this.form.percentIndex = e.detail.value;
			},
			
			onChangeRateType(e){
				this.form.rateTypeIndex = e.detail.value;
			},
			
			// 贷款年限切换事件
			onChangeYear(e) {
				this.form.yearIndex = e.detail.value;
			},

			// 基准利率
			onChangeRate(e) {
				this.form.rateIndex = e.detail.value;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.busin-container {
		background-color: #FFFFFF;
		width: 100%;
	}



	.input-class {
		display: flex;
		align-items: center;
		border-radius: 10rpx;
		padding: 0 20rpx;
		height: 60rpx;
		width: 400rpx;
		background-color: #F8F8F8;
		justify-content: space-between;
		font-size: 24rpx;

		.inputWrapper {
			width: 200rpx;
			font-size: 24rpx;
		}

		.unitWrapper {}
	}

	.ico_down {
		width: 10rpx;
		height: 20rpx;
		background-image: url(@/static/image/icon_more.png);
	}

	// .content {
	// 	display: flex;
	// 	min-height: 100rpx;
	// 	position: relative;

	// 	&::before {
	// 		content: '';
	// 		position: absolute;
	// 		background-color: #979797;
	// 		width: 90%;
	// 		height: 1rpx;
	// 		bottom: 0;
	// 		transform: translate(-50%);
	// 		left: 50%;
	// 	}

	// 	.left-label {
	// 		width: 30%;
	// 		display: flex;
	// 		justify-content: center;
	// 		align-items: center;
	// 		font-size: 28rpx;
	// 	}

	// 	.right-form {
	// 		width: 70%;
	// 		// display: flex;
	// 		// justify-content: flex-end;
	// 		// align-items: center;
	// 		font-size: 28rpx;
	// 		padding-right: 35rpx;
	// 	}
	// }



</style>